<template>
    <div class="order">
        <div class="order-list">
            <div class="order-item flex-a" v-for="item in cartList" :key="item.goodsId">
                <nut-card :img-url="item.goodsCoverImg" :title="item.goodsName" :price="item.sellingPrice + ''"
                    :shopDesc="item.specName + ''">
                    <template #footer>
                        <div class="customize">
                            <nut-input-number v-model="item.goodsCount" :min="1" @change="addCartList(item)" />
                        </div>
                    </template>
                </nut-card>
            </div>
        </div>
        <nut-toast :msg="msg" v-model:visible="show" :type="type" />
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import mitt from "./../../../../utils/mitt";
import { reactive, toRefs, onMounted } from 'vue';
import { getCart, uploadCart } from '../../../../api/index'
export default {
    components: {

    },
    setup() {
        const data = reactive({
            cartList: [],
            msg: '',
            show: false,
            type: '',
            totalPrice: 0,
            id: '',
            addrInfo: [],
            cartItemIds: [] as any
        });

        onMounted(() => {
            const router = useRouter();
            if (router.params.cartItemIds) {
                data.cartItemIds = router.params.cartItemIds.split(',')
                getCartList()
            }
        });
        const getCartList = () => {
            getCart().then(res => {
                if (res.resultCode == 200) {
                    let list = [] as any
                    res.data.list.forEach(item => {
                        data.cartItemIds.forEach(ele => {
                            if (item.cartItemId == ele) {
                                list.push(item)
                            }
                        })
                    })
                    data.cartList = list
                    mitt.emit("ids", data.cartItemIds);
                    addPrice()
                }
            })
        }
        const addCartList = (item) => {
            uploadCart({ goodsCount: parseInt(item.goodsCount), goodsId: item.goodsId, cartItemId: item.cartItemId }).then(res => {
                if (res.resultCode == 500) {
                    openToast('warn', res.message)
                }
                getCartList()
            })
        }
        const openToast = (type: string, msg: string,) => {
            data.show = true;
            data.msg = msg;
            data.type = type;
        }
        const addPrice = () => {
            let total = 0
            data.cartList.forEach(item => {
                total += parseInt(item.sellingPrice) * parseInt(item.goodsCount)
            })
            data.totalPrice = total.toFixed(2)
            mitt.emit("total", total.toFixed(2))
        }
        return {
            ...toRefs(data), getCartList, addCartList, addPrice
        }
    }
};
</script>


<style lang="scss" >
.order {
    .order-list {
        // padding: 20px 10px 20px 20px;

        .order-item {
            margin-bottom: 10rpx;

            .search_prolist_attr {
                margin: 3px 0 1px;
                height: 15px;
                overflow: hidden;

                >span {
                    float: left;
                    padding: 2px 7px;
                    border-radius: 1px;
                    font-size: 16px;
                    height: 20px;
                    line-height: 20px;
                    color: #999;
                    background-color: #f2f2f7;
                    margin-right: 5px;
                }
            }

            .nut-card__right__price__origin {
                display: none;
            }
        }
    }
}
</style>